{
const splom = vl.markCircle({size: 15, opacity: 0.5})
.encode(
vl.x().fieldQ(vl.repeat('column')),
vl.y().fieldQ(vl.repeat('row')),
)
.width(125)
.height(125)
.repeat({
row: ['temp_max', 'precipitation', 'wind'],
column: ['wind', 'precipitation', 'temp_max']
});
const dateHist = vl.layer(
vl.markBar().encode(
vl.x().month('date').type('ordinal').title('Month'),
vl.y().average(vl.repeat('row'))
),
vl.markRule({stroke: 'firebrick'}).encode(
vl.y().average(vl.repeat('row'))
)
)
.width(175)
.height(125)
.repeat({row: ['temp_max', 'precipitation', 'wind']});
const tempHist = vl.markBar()
.encode(
vl.x().fieldQ('temp_max').bin(true).title('Temperature (°C)'),
vl.y().count(),
vl.color().fieldN('weather').scale({
domain: ['drizzle', 'fog', 'rain', 'snow', 'sun'],
range: ['#aec7e8', '#c7c7c7', '#1f77b4', '#9467bd', '#e7ba52']
})
)
.width(115)
.height(100)
.facet({column: vl.field('weather')});
return vl.data(weather)
.transform(vl.filter('datum.location == "Seattle"'))
.title('Seattle Weather Dashboard')
.vconcat(
vl.hconcat(splom, dateHist),
tempHist
)
.resolve({legend: {color: 'independent'}})
.config({axis: {labelAngle: 0}})
.render();
}